<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item label="">
              <a-input-group compact>
                <a-select v-model="queryParam.searchField">
                  <a-select-option value="projectNo"> 项目编号 </a-select-option>
                  <a-select-option value="projectName"> 项目名称 </a-select-option>
                  <a-select-option value="projectManagerRealName"> 项目经理 </a-select-option>
                </a-select>
                <a-input-search
                  style="width: 78%"
                  v-model="queryParam.keyword"
                  @search="searchQuery"
                  placeholder="请按照关键字进行搜索"
                />
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="查询年份">
             <a-select v-model="queryParam.searchYear" placeholder="请选择" @change="yearChange">
                <a-select-option :value="item.code" v-for="item in yearList" :key="item.code"> {{item.label}} </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="showSearchForm = true" icon="search">高级查询</a-button>
              <a-button
                type="primary"
                @click="handlePostExportXls('五比五拼报表')"
                style="margin-left: 10px"
                icon="download"
                >导出</a-button
              >
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目状态">
                <a-select v-model="queryParam.status">
                  <a-select-option value="4"> 执行中 </a-select-option>
                  <a-select-option value="5"> 验收中 </a-select-option>
                  <a-select-option value="6"> 结题 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目号">
                <a-input v-model="queryParam.projectNo" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="queryParam.projectName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目经理">
                <a-input v-model="queryParam.projectManagerRealName" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator"></div>
    <span>单位：万元</span>
    <div class="container">
      <a-table
        ref="table"
        bordered
        size="middle"
        :scroll="{ x: true }"
        :rowKey="rowKey"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="incomeMethod" slot-scope="text">
          <span :title="caseToShow(text)">{{ showLength(text, 15) }}</span>
        </template>
        <template slot="incomeMonthly" slot-scope="text">
          <span :title="caseToShow(text)" v-html="showLength(caseToShow(text), 15)"></span>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListSearchMixin'
import { caseToShow } from '@/utils/common.js'
export default {
  name: 'fiveToFiveIndex',
  mixins: [JeecgListMixin],
  data() {
    return {
      description: '五比五拼报表',
      /* 勾选导出参数 */
      rowKey: 'projectBuildId',
      busType: 'fiveToFiveIndex',
      columns: [
        {
          title: '主导经营体',
          dataIndex: 'mainDeptName',
          key: 'mainDeptName',
          align: 'center',
          fixed: 'left',
          width: '100px',
        },
        {
          title: '项目编号',
          dataIndex: 'projectNo',
          key: 'projectNo',
          align: 'center',
          fixed: 'left',
          width: '100px',
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          key: 'projectName',
          align: 'center',
          fixed: 'left',
          width: '100px',
        },
        {
          title: '项目分类',
          dataIndex: 'projectTypeName',
          key: 'projectTypeName',
          align: 'center',
          width: '100px',
        },
        {
          title: '是否参加五比五拼',
          dataIndex: 'hasJoin',
          key: 'hasJoin',
          align: 'center',
          width: '100px',
        },
        {
          title: '比拼类型',
          dataIndex: 'competitionTypeName',
          key: 'competitionTypeName',
          align: 'center',
          width: '100px',
        },
        {
          title: '经济效益',
          dataIndex: 'budgetCost',
          key: 'budgetCost',
          align: 'center',
          width: '100px',
        },
        {
          title: '非经济效益',
          dataIndex: 'incomeMethod',
          key: 'incomeMethod',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: 'incomeMethod' },
        },
        {
          title: '项目推进涉及的协作经营体数量是多少',
          dataIndex: 'twoTypeName',
          key: 'twoTypeName',
          align: 'center',
          width: '100px',
        },
        {
          title: '是否攻克历史遗留难题或突破关键瓶颈',
          dataIndex: 'hasConquer',
          key: 'hasConquer',
          align: 'center',
          width: '100px',
        },
        {
          title: '项目经验可推广范围',
          dataIndex: 'threeTypeName',
          key: 'threeTypeName',
          align: 'center',
          width: '100px',
        },
        {
          title: '项目经理',
          dataIndex: 'projectManagerRealName',
          key: 'projectManagerRealName',
          align: 'center',
          width: '100px',
        },
        {
          title: '项目状态',
          dataIndex: 'statusText',
          key: 'statusText',
          align: 'center',
          width: '100px',
        },
        {
          title: '实际完成情况',
          dataIndex: 'incomeMonthly',
          key: 'incomeMonthly',
          align: 'center',
          scopedSlots: { customRender: 'incomeMonthly' },
        },
      ],
      url: {
        list: '/projectBuild/fiveToFiveReportPage',
        exportXlsUrl: '/projectBuild/fiveToFiveReportExport',
      },
      showSearchForm: false,
      keyword: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      queryParam: {
        searchField: 'projectNo',
        maType: 1,
        searchYear: parseInt(String(new Date().getFullYear()))
      },
      yearList: []
    }
  },
  created(){
    // 设置当前年份
    const year = String(new Date().getFullYear())
    const lastNum = year.slice(year.length-1,year.length)  
    this.yearList = []              
    for(var i = lastNum; i >= 0; i--){
      this.yearList.push({label: `202${i}年`,code: parseInt(`202${i}`)})
    }
    this.$set(this.queryParam,'searchYear',parseInt(year))
  },
  mounted() {},
  computed: {},
  methods: {
    caseToShow(obj) {
      return caseToShow(obj)
    },
    yearChange() {
      this.searchQuery()
    },
    handleToSearch() {
      this.showSearchForm = false
      this.searchQuery()
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.searchField = 'projectNo'
      this.handleToSearch()
    },
    showLength(item, len) {
      if (!item || item.length <= len) {
        return item
      }
      return item.substring(0, len) + '...'
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@media (max-width: 1170px) {
  .page-main .container section .list-content > div.flex-num1-box {
    flex-wrap: wrap;
    > div {
      &:nth-child(1),
      &:nth-child(2) {
        width: 48%;
      }
      &:nth-child(3) {
        width: 100%;
        justify-content: flex-start;
        > span {
          margin-right: 20px;
          margin-left: 0;
        }
      }
    }
  }
  .page-main .container section .list-content > div.flex-num2-box {
    display: block;
    margin-top: 0;
  }
}
</style>